<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		/*
		绘制面，绘制若干个面
		-shape

		ShapeLayer
		官方案例
		如果我们单独需要创建一个 立体多边形,可以参考官方文档中需要哪些数据，
		按照指定的需求根据获取到的数据进行解析。
		var layer = new mapvgl.ShapeLayer({
			color: 'rgba(55, 55, 200, 1)',
			blend: 'lighter',
			style: 'normal',
			data: [{
				geometry: {
					type: 'Polygon',
					// 立体多边形需要的三个点坐标数据
					coordinates: [
						[
							[116.392394, 39.910683],
							[116.405976, 39.927727],
							[116.420996, 39.910351]
						]
					]
				},
				properties: {
					height: 100, // 多边形高度
				}
			}]
		});

		2个点形成一条线，再加高度
		coordinates:[
			[
				[116.392394, 39.910683],
				[116.405976, 39.927727],
			]
		]

		3个点形成一个三角形，再加高度
		coordinates:[
			[
				[116.392394, 39.910683],
				[116.405976, 39.927727],
				[116.420996, 39.910351]
			]
		]


		官网的坐标方式

		------------------

		还有另一种坐标方式：墨卡托平面坐标
		官网api转换：
		https://lbsyun.baidu.com/faq/api?title=webapi/guide/changeposition-base

		坐标转换：
		https://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=6&ak=您的AK//GET请求
		
		from:
		1：GPS标准坐标；

		to:
		6：百度地图采用的墨卡托平面坐标（bd09mc）；
		*/
		/* 
		## 1.初始化页面样式和引入需要的JS库。
		#### 1.1 需要设置html、body和容器的宽高为 100%。
		*/
		html,
		body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
		}
		#map_container {
				width: 100%;
				height: 100%;
				margin: 0;
		}
	</style>
	<!-- 百度地图基础库 使用自己的 ak 进行配置 -->
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
	<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
	<!-- 使用根据城市名称获取城市的坐标 -->
	<script src="https://mapv.baidu.com/build/mapv.js"></script>
	<!--使用mapvgl的时候需要引入-->
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
	<title>地图展示</title>
</head>
<body>
	<!-- 
	## 2. 初始化地图容器

	#### 2.1 初始化地图容器使用一个标签，因为这里使用 common.js对地图进行初始化，在该文件中固定了获取容器的id为 map_container，所以在初始化容器时需要固定其id为 map_container。

	#### 2.2 当然也可以将 common.js文件下载修改后单独引入，自己定义的文件。
	-->
	<div id="map_container"></div>
	<script type="text/javascript">
		/* ## 3. 初始化地图*/
		var map = initMap({
			tilt: 80,
			heading: -45.3,
			center: [106.540547,29.564858],
			zoom: 17
		});


		initData();

		/* 
		## 4. 准备数据源 
		
		#### 4.1 准备的数据源是获取的某处的建筑 json 数据并对其专门进行解析。

		#### 4.2 如果我们单独需要创建一个 立体多边形,可以参考官方文档中需要哪些数据，按照指定的需求根据获取到的数据进行解析。
		
		var layer = new mapvgl.ShapeLayer({
			color: 'rgba(55, 55, 200, 1)',
			blend: 'lighter',
			style: 'normal',
			data: [
				{
					geometry: {
						type: 'Polygon',
						// 立体多边形需要的三个点坐标数据
						coordinates: [
							[
								[116.392394, 39.910683],
								[116.405976, 39.927727],
								[116.420996, 39.910351]
							]
						]
					},
					properties: {
						height: 100, // 多边形高度
					}
				}
			]
		});
		*/
		function initData() {
			// 请求某处的城市建筑数据
			fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json')
				.then(res => res.json())
				.then(res => {
					var data = res;
					// 所有多边形的面
					var polygons = [];
					// 数据的长度
        			var len = data.length;
					// 下面的算法是根据请求到的数据进行专门处理的算法 ，在开发中我们需要获取的数据有 一些点的坐标用于构成面 以及高度数据
					for (var i = 0; i < len; i++) {
						// 获取结果中的每一项数据
						var line = data[i];
						// 每一个多边形的面数据
						var polygon = [];
						// 转换为 墨卡托数据
						/// 官方提供的转换墨卡托方式
						var pt = [line[1] * 512, line[2] * 512];

						for (var j = 3; j < line.length; j += 2) {
							pt[0] += line[j] / 100 / 2;
							pt[1] += line[j + 1] / 100 / 2;
							// 这是一个三维数组
							polygon.push([pt[0], pt[1]]);
						}
						// 将数据设置到我们的polygons中
						polygons.push({
							geometry: {
								// 设置类型为多边形
								type: 'Polygon',
								coordinates: [polygon]
							},
							properties: {
								// 在获取到的数据中第一个数据代表的是高度
								height: line[0] / 2
							}
						});
					}
					setData(polygons);
			});
		}

		/*## 5.绘制数据源 */
		function setData(data) {
			console.log(data);
			/* 5. 创建MapVGL图层管理器*/
			var view = new mapvgl.View({
				map: map
			});
			/* 6.创建可视化图层，并添加到图层管理器中 */
			/*
			ShapeLayer
			用来展示大数据的立体多边形，继承自Layer

			可使用鼠标拾取Pick
			https://mapv.baidu.com/gl/docs/Pick.html
			*/
			var shaperLayer = new mapvgl.ShapeLayer({
				// 颜色
				color: 'rgb(0, 255, 255)',
				// 一些特效
    			style: 'normal',
				// 楼块初始化升起动画的时间，单位毫秒
				riseTime: 2000, 
				// riseTime: 1000,
				// 楼块透明度
				opacity: 0.3, 
				// 点击事件
				// 是否开启鼠标事件，开启后支持鼠标onClick与onMousemove事件，同时支持改变拾取物体颜色。
				enablePicked: true, 
				// 手动指定选中数据项索引，使该条数据所表示物体变色，-1表示没选中任何元素
				selectedIndex: -1, 
				// 选中态颜色
				selectedColor: '#ee1111', 
				// 根据鼠标位置来自动设置选中项selectedIndex，使选中物体变色，设置为true后selectedIndex失效
				autoSelect: true, 
				// 点击事件，如果点击在可选中物体上，则返回对应数据
				onClick: (e) => { 
					console.log(e);
				}
			});
			view.addLayer(shaperLayer);

			/* 7.关联图层与数据 */
			shaperLayer.setData(data);
		}
	</script>	
</body>
</html>